<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--/webjars/jquery/jquery.min.js  这是在pom中引用相关的前端的jar包，在前端页面来进行调用的方式-->
 <script src="/webjars/jquery/jquery.min.js"></script>
 <script src="/webjars/sockjs-client/sockjs.min.js"></script>
 <script src="/webjars/stomp-websocket/stomp.min.js"></script>
<body>

<table>
    <tr>
        <td>请输入用户名</td>
        <td><input type="text" id="name"></td>
    </tr>
    <tr>
        <td><input type="button" id="connect" value="连接"></td>
        <td><input type="button" id="disconnect" disabled="disabled" value="断开连接"></td>
    </tr>
</table>
<div id="chat" style="display: none">
    <table>
        <tr>
            <td>请输入聊天内容</td>
            <td><input type="text" id="content"></td>
            <td><input type="button" id="send" value="发送"></td>
        </tr>
    </table>
</div>
<div id="conversation"></div>
<script>
    $(function () {
    	//点击连接按钮 
        $("#connect").click(function () {
            connect();
        })
        $("#disconnect").click(function () {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
        })

        $("#send").click(function () {
        	//配置类定义 /app       控制类接受的方法 /hello
            stompClient.send('/app/hello',{},JSON.stringify({'name':$("#name").val(),'content':$("#content").val()}))
        })
    })

    var stompClient = null;

    //连接按钮触发  
    function connect() {
    	//必须有用户名
        if (!$("#name").val()) {
            return;
        }
    	//创建websoket  后端设置的端点  配置类中定义 /chat
        var socket = new SockJS('/chat');
         // 获取STOMP子协议的客户端对象
        stompClient = Stomp.over(socket);
        // 向服务器发起websocket连接  第一个参数是客户端的认证信息,按需求配置 这里不需要  如果是mq的话，需要进行配置
        stompClient.connect({}, function (success) {
        	//连接成功后 设置为true  设置按钮的状态
            setConnected(true);
        	//监听websocket的消息  配置类中定义 /topic开头      控制类中具体的请求/topic/greetings 
            stompClient.subscribe('/topic/greetings', function (msg) {
                // 订阅服务端提供的某个topic  后端传过来的消息是json格式  需要进行解析   字符串转换成对象  
                showGreeting(JSON.parse(msg.body));
            });
        })
    }

    //展示得到的消息
    function showGreeting(msg) {
        $("#conversation").append('<div>' + msg.name + ':' + msg.content + '</div>');
    }

    //设置按钮的状态
    function setConnected(flag) {
        $("#connect").prop("disabled", flag); 
        $("#disconnect").prop("disabled", !flag);
        //如果连接成功，显示聊天内容  
        if (flag) {
            $("#chat").show();
        } else {
            $("#chat").hide();
        }
    }
</script>
</body>
</html>